<template>
	<view class="custom-navbar">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<view class="navbar-content">
			<!-- 返回按钮 -->
			<view class="back-btn" @click="handleBack" v-if="isReturnVisible">
				<image src="/static/icons/back.png" class="back-icon" />
			</view>

			<!-- 标题 -->
			<view class="title">{{ title }}</view>

			<!-- 添加按钮 -->
			<view class="add-btn" @click="handleAdd" v-if="isAddVisible">
				<image src="/static/icons/add.png" class="add-icon" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String, // 接收标题属性
			isReturnVisible: Boolean,
			isAddVisible: Boolean
		},
		data() {
			return {
				statusBarHeight: 0
			};
		},
		mounted() {
			// 获取状态栏高度（仅App端）
			// #ifdef APP - PLUS
			// this.statusBarHeight = plus.navigator.getStatusbarHeight();
			// #endif
		},
		methods: {
			handleBack() {
				uni.navigateBack();
			},
			handleAdd() {
				// 跳转到添加动态页面
				uni.navigateTo({
					url: '/pages/addMoment/addMoment'
				});
			}
		}
	};
</script>

<style scoped>
	.custom-navbar {
		position: absolute;
		/* 关键：绝对定位 */
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10000;
		align-items: center;
		/* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); */
	}

	.status-bar {
		width: 100%;
	}

	.navbar-content {
		height: 44px;
		display: flex;
		align-items: center;
		padding: 0 15px;
	}

	.back-btn {
		width: 24px;
		height: 24px;
		margin-right: 15px;
	}

	.back-icon {
		width: 24px;
		height: 24px;
	}

	.title {
		position: absolute;
		font-size: 20px;
		color: white;
		left: 0;
		right: 0;
		text-align: center;
		pointer-events: none;
	}

	.add-btn {
		margin-left: 340px;
		width: 24px;
		height: 24px;
	}

	.add-icon {
		width: 24px;
		height: 24px;
	}
</style>